<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>文章</title>
		<script src="js/common.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/swiper-4.3.3.min.js"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/swiper-4.3.3.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/common/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/common/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/Article.css"/>
	</head>
	<body>
		<input type="checkbox" id="check" />
		<input type="checkbox" id="dl"  />
		<input type="checkbox" name="tuichu" id="tuichu" value="" />
		<input type="checkbox" name="yy" id="yy" value="" />
		<div class="mobile">
			<header>
				<label for="check">
					<ul class="login">
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</label>
				<div class="logo">
					<img src="img/logo.png"/>
				</div>
				<div class="search">
					<img src="img/fdj.png"/>
				</div>
			</header>
			
			<section>
				<div class="swiper-container">
		    		<div class="swiper-wrapper">
				      <div class="swiper-slide"><img src="img/lbt.png" alt="" /></div>
				      <div class="swiper-slide"><img src="img/lbt.png" alt="" /></div>
				      <div class="swiper-slide"><img src="img/lbt.png" alt="" /></div>
				      <div class="swiper-slide"><img src="img/lbt.png" alt="" /></div>
				      <div class="swiper-slide"><img src="img/lbt.png" alt="" /></div>
				      <div class="swiper-slide"><img src="img/lbt.png" alt="" /></div>
				      <div class="swiper-slide"><img src="img/lbt.png" alt="" /></div>
				      <div class="swiper-slide"><img src="img/lbt.png" alt="" /></div>
				      <div class="swiper-slide"><img src="img/lbt.png" alt="" /></div>
				      <div class="swiper-slide"><img src="img/lbt.png" alt="" /></div>
		    		</div>
		    		<!-- Add Pagination -->
		    		<div class="swiper-pagination"></div>
		  		</div>
				<script src="js/swiper-4.3.3.min.js"></script>

			  <!-- Initialize Swiper -->
			  <script>
			    var mySwiper = new Swiper('.swiper-container', {
			    	autoplay:true,
			      pagination: {
			        el: '.swiper-pagination',
			      },
			    }
			);
			//鼠标滑过pagination控制swiper切换
			for(i=0;i<mySwiper.pagination.bullets.length;i++){
			  mySwiper.pagination.bullets[i].index=i
			  mySwiper.pagination.bullets[i].onmouseover=function(){
			    mySwiper.slideTo(this.index);
			  };
			} 
			  </script>
			  
			</section>
			
			<div class="bodys">
				<a href="">
					<div class="bodys_left">				
						<div class="bodys_left_img">
							<img src="img/haitian.jpg"/>
						</div>
						<span>
							海天"晒"宴，和汪涵一起，参观海天酱油......
						</span>
						<div class="bodys_left_bottom">
							<div class="bodys_left_bottom_yingxiao">
								<span>营销</span>
							</div>
							<div class="bodys_left_bottom_huixin">
								<div class="bodys_left_bottom_huixin_img">			
									<img src="img/huixin.png"/>
								</div>
								<span>120</span>
							</div>
							<div class="bodys_left_bottom_yanjing">
								<div class="bodys_left_bottom_yanjing_img">
									<img src="img/yanjing_03.jpg"/>
								</div>
								<span>560</span>
							</div>
						</div>
						<div class="bodys_left_touxiang">
							<div class="bodys_left_touxiang_img">
								<img src="img/touxiang.jpg"/>
							</div>
							<span>叶巧岚&nbsp;&nbsp;2015年1月20日</span>
						</div>
					</div>
				</a>
				
				<div class="bodys_right">
					<div class="bodys_left_img">
						<img src="img/haitian.jpg"/>
					</div>
					<span>
						海天"晒"宴，和汪涵一起，参观海天酱油......
					</span>
					<div class="bodys_left_bottom">
						<div class="bodys_left_bottom_yingxiao">
							<span>营销</span>
						</div>
						<div class="bodys_left_bottom_huixin">
							<div class="bodys_left_bottom_huixin_img">
								<img src="img/huixin.png"/>
							</div>
							<span>120</span>
						</div>
						<div class="bodys_left_bottom_yanjing">
							<div class="bodys_left_bottom_yanjing_img">
								<img src="img/yanjing_03.jpg"/>
							</div>
							<span>560</span>
						</div>
					</div>
					<div class="bodys_left_touxiang">
						<div class="bodys_left_touxiang_img">
							<img src="img/touxiang.jpg"/>
						</div>
						<span>叶巧岚&nbsp;&nbsp;2015年1月20日</span>
					</div>
				</div>
			</div>
			<div class="bodys">
				<div class="bodys_left">				
					<div class="bodys_left_img">
						<img src="img/haitian.jpg"/>
					</div>
					<span>
						海天"晒"宴，和汪涵一起，参观海天酱油......
					</span>
					<div class="bodys_left_bottom">
						<div class="bodys_left_bottom_yingxiao">
							<span>营销</span>
						</div>
						<div class="bodys_left_bottom_huixin">
							<div class="bodys_left_bottom_huixin_img">
								<img src="img/huixin.png"/>
							</div>
							<span>120</span>
						</div>
						<div class="bodys_left_bottom_yanjing">
							<div class="bodys_left_bottom_yanjing_img">
								<img src="img/yanjing_03.jpg"/>
							</div>
							<span>560</span>
						</div>
					</div>
					<div class="bodys_left_touxiang">
						<div class="bodys_left_touxiang_img">
							<img src="img/touxiang.jpg"/>
						</div>
						<span>叶巧岚&nbsp;&nbsp;2015年1月20日</span>
					</div>
				</div>
				
				<div class="bodys_right">
					<div class="bodys_left_img">
						<img src="img/haitian.jpg"/>
					</div>
					<span>
						海天"晒"宴，和汪涵一起，参观海天酱油......
					</span>
					<div class="bodys_left_bottom">
						<div class="bodys_left_bottom_yingxiao">
							<span>营销</span>
						</div>
						<div class="bodys_left_bottom_huixin">
							<div class="bodys_left_bottom_huixin_img">
								<img src="img/huixin.png"/>
							</div>
							<span>120</span>
						</div>
						<div class="bodys_left_bottom_yanjing">
							<div class="bodys_left_bottom_yanjing_img">
								<img src="img/yanjing_03.jpg"/>
							</div>
							<span>560</span>
						</div>
					</div>
					<div class="bodys_left_touxiang">
						<div class="bodys_left_touxiang_img">
							<img src="img/touxiang.jpg"/>
						</div>
						<span>叶巧岚&nbsp;&nbsp;2015年1月20日</span>
					</div>
				</div>
			</div>
			<div class="bodys">
				<div class="bodys_left">				
					<div class="bodys_left_img">
						<img src="img/haitian.jpg"/>
					</div>
					<span>
						海天"晒"宴，和汪涵一起，参观海天酱油......
					</span>
					<div class="bodys_left_bottom">
						<div class="bodys_left_bottom_yingxiao">
							<span>营销</span>
						</div>
						<div class="bodys_left_bottom_huixin">
							<div class="bodys_left_bottom_huixin_img">
								<img src="img/huixin.png"/>
							</div>
							<span>120</span>
						</div>
						<div class="bodys_left_bottom_yanjing">
							<div class="bodys_left_bottom_yanjing_img">
								<img src="img/yanjing_03.jpg"/>
							</div>
							<span>560</span>
						</div>
					</div>
					<div class="bodys_left_touxiang">
						<div class="bodys_left_touxiang_img">
							<img src="img/touxiang.jpg"/>
						</div>
						<span>叶巧岚&nbsp;&nbsp;2015年1月20日</span>
					</div>
				</div>
				
				<div class="bodys_right">
					<div class="bodys_left_img">
						<img src="img/haitian.jpg"/>
					</div>
					<span>
						海天"晒"宴，和汪涵一起，参观海天酱油......
					</span>
					<div class="bodys_left_bottom">
						<div class="bodys_left_bottom_yingxiao">
							<span>营销</span>
						</div>
						<div class="bodys_left_bottom_huixin">
							<div class="bodys_left_bottom_huixin_img">
								<img src="img/huixin.png"/>
							</div>
							<span>120</span>
						</div>
						<div class="bodys_left_bottom_yanjing">
							<div class="bodys_left_bottom_yanjing_img">
								<img src="img/yanjing_03.jpg"/>
							</div>
							<span>560</span>
						</div>
					</div>
					<div class="bodys_left_touxiang">
						<div class="bodys_left_touxiang_img">
							<img src="img/touxiang.jpg"/>
						</div>
						<span>叶巧岚&nbsp;&nbsp;2015年1月20日</span>
					</div>
				</div>
			</div>
			
			<hr />
			
			<div class="more">
				<a href="Article_for2.html">							
					<p>加载更多</p>
				</a>
			</div>
		</div>
		
		<!--底部导航栏-->
		<footer>
			<div class="footer_div">
				<div class="footer_div_daohang">
					<div class="footer_div_daohang_img">
						<a href="#">
							<img src="img/首页.png"/>
						</a>
					</div>
					<span>首页</span>
				</div>
				<div class="footer_div_daohang">
					<div class="footer_div_daohang_img">
						<a href="#">
							<img src="img/logos.png"/>
						</a>
					</div>
					<span>GIMC</span>
				</div>
				<div class="footer_div_daohang">
					<div class="footer_div_daohang_img">
						<a href="#">
							<img src="img/笔.png"/>
						</a>
					</div>
					<span>文章</span>
				</div>
				<div class="footer_div_daohang">
					<div class="footer_div_daohang_img">
						<a href="#">
							<img src="img/circulation2-循环.png"/>
						</a>
					</div>
					<span>资源</span>
				</div>
				<div class="footer_div_daohang">
					<div class="footer_div_daohang_img">
						<a href="#">
							<img src="img/学院.png"/>
						</a>
					</div>
					<span>学院</span>
				</div>
			</div>
		</footer>
		
		<!--搜索-->
		<!--<div class="sousuos">
			<div class="sosuos_top">
				<span class="back">
					×
				</span>
			</div>
		</div>-->
		
		<!--登陆弹窗-->
		<div class="loginBox">
			<label for="check">				
				<span class="back">
					×
				</span>
			</label>
			<hr />
			<div class="loginBox_img">
				<a href="#">
					<img src="img/tou.png"/>
				</a>
			</div>
			<label for="dl">
				<div class="loginBox_test">
					立即登陆
				</div>
			</label>
			<div class="loginBox_heng">
				
			</div>
			
			<ul>
				<li>
					<input type="checkbox" id="yc" />
					<label for="yc">
						<div class="loginBox_GIMC">
							<span>GIMC</span>
							<span>></span>						
						</div>
					</label>
					<div class="loginBox_yc">
						<p>省广介绍</p>
						<p>新闻质询</p>
					</div>
				</li>
				<li>
					<a class="loginBox_GIMC">
						<span>文章</span>
						<span>></span>
					</a>
				</li>
				<li>
					<a class="loginBox_GIMC">
						<span>资源</span>
						<span>></span>
					</a>
				</li>
				<li>
					<a class="loginBox_GIMC">
						<span>课程</span>
						<span>></span>
					</a>
				</li>
			</ul>
		</div>
		
		<!--输入密码-->
		<div class="Land">
			<label for="dl">				
				<span class="back">
					×
				</span>
			</label>
			<hr />
			<div class="Land_logo">
				<img src="img/lind_logo.png"/>
			</div>
			<div class="Land_user">
				<div class="Land_user_img">
					<img src="img/人物.png"/>
				</div>
				<input type="text" name="" id="" value="" placeholder="请输入已验证的手机号或验证" />
			</div>
			<div class="Land_user">
				<div class="Land_user_img">
					<img src="img/锁 1.png"/>
				</div>
				<input type="text" name="" id="" value="" placeholder="请输入密码" />
			</div>
			<div class="Land_pass clear_fix">
				<span>忘记密码</span>
				<div class="Land_pass_img">
					<img src="img/wenhao_03.png"/>
				</div>
			</div>
			<div class="Land_denglu">
				<label for="yy">
					<div>
						<span>登陆</span>
					</div>
				</label>
				<label for="yy">
					<div>
						<span>注册</span>
					</div>
				</label>
			</div>
		</div>
		<input type="checkbox" name="" id="outer" value="" />
		
		<!--登陆成功-->
		<div class="yes">
			<label for="yy">				
				<span class="back">
					×
				</span>
			</label>
			<hr />
			
			<div class="touxiang">
				<img src="img/touxianng_01_03.jpg"/>
			</div>
			<div class="chenxiaoming">
				<span>陈小敏</span>
				<span>&nbsp;&nbsp;个人中心>&nbsp;&nbsp;</span>
			</div>
			<div class="xing">
				<div class="xingxing">
					<img src="img/xingxing.png"/>
				</div>
				<div class="xingxing">
					<img src="img/xingxing.png"/>
				</div>
				<div class="xingxing">
					<img src="img/xingxing.png"/>
				</div>
				<div class="xingxing">
					<img src="img/xingxing.png"/>
				</div>
			</div>
			<div class="guanzhu">
				<p>关注<a>36</a><span>丨</span>粉丝<a>290</a></p>
			</div>
			<div class="shouchang">
				<div class="shouchang_left">
					<span>我的收藏</span>
				</div>
				<div class="shouchang_right">
					<span>我的发布</span>
				</div>
			</div>
			
			<div class="loginBox_heng">
			</div>
			<ul>
				<li>
					<input type="checkbox" id="yq" />
					<label for="yq">
						<div class="loginBox_GIMC">
							<span>GIMC</span>
							<span>></span>						
						</div>
					</label>
					<div class="loginBox_yq">
						<p>省广介绍</p>
						<p>新闻质询</p>
					</div>
				</li>
				<li>
					<a class="loginBox_GIMC">
						<span>文章</span>
						<span>></span>
					</a>
				</li>
				<li>
					<a class="loginBox_GIMC">
						<span>资源</span>
						<span>></span>
					</a>
				</li>
				<li>
					<a class="loginBox_GIMC">
						<span>课程</span>
						<span>></span>
					</a>
				</li>
			</ul>
			<label for="yy">
				<div class="out">
					<span>退出</span>
				</div>
			</label>
		</div>
	</body>
</html>
